<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>
<head>
    <meta charset="UTF-8">
    <title>IBlog</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <!--<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>-->
    <!--<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>-->
    <link rel="stylesheet" href="../../../Clcss/EYBlog.css">
    <link rel="stylesheet" href="../../../Clcss/vote.css">


</head>

<body>

<div class="container">
    <div class="header">
        <h1 class="text-muted" style="display: inline-block">
            <a>Hi, Enjoy Your Blog</a>
        </h1>
        <div class="header-right">

                <form action="/cl/searchArticle" method="post" class="input-group"  style="float: right;position: relative;top: 10px;right: -380px">
                    <input type="text" id="search-input" class="form-control" name="input" placeholder="Search for..." style="border-radius: 10px">
                        <span class="input-group-btn">
                    <button class="btn btn-default" type="submit" id="search-btn" >Go!</button>
                </span>
                </form>
        </div>
    </div>
    <!--轮播图-->
    <div class="slider">
        <ul class="slides">
            <li class="slide"><img src="../../../img/imgy/1.jpg" alt=""></li>
            <li class="slide"><img src="../../../img/imgy/2.jpg" alt=""></li>
            <li class="slide"><img src="../../../img/imgy/3.jpg" alt=""></li>
            <li class="slide"><img src="../../../img/imgy/4.jpg" alt=""></li>
            <li class="slide"><img src="../../../img/imgy/1.jpg" alt=""></li>
        </ul>
    </div>

    <!--登陆后的显示区域-->
    <div class="navu" id="navu">
        <div class="yourself">Here is yourself</div>
        <div class="yourheadimg"><img src="${pageContext.request.contextPath}/${sessionScope.User.uheadpicurl}"></div>
        <div class="others">
            <ul>
                <li><a><img src="../../../img/imgy/github.png"></a></li>
                <li><a><img src="../../../img/imgy/facebook-2.png"></a></li>
                <li><a><img src="../../../img/imgy/weibo.png"></a></li>
            </ul>
            <div class="selfdescript">${sessionScope.User.usign}</div>

        </div>
        <div class="yournavbar">
            <div><a href="/cl/selfBlog">homepage &nbsp;&nbsp;<img class="nav-icon"
                                                                  src="../../../img/imgy/zhuyewhite.png"></a></div>
            <div><a href="/cl/getUserPicture">album&nbsp;&nbsp;<img class="nav-icon" src="../../../img/imgy/album.png"></a></div>
            <div><a href="/cl/writeArticle">write&nbsp;&nbsp;<img class="nav-icon" src="../../../img/imgy/pen.png"></a>
            </div>
        </div>
         <a href="/cl/exitLogin" style="position: relative;top: 60px;left: 260px"><img  style="width: 24px" src="../../../img/退出.png"></a>
    </div>

    <c:if test="${sessionScope.User==null}">
        <!--登陆区域-->
        <div class="nav" id="nav1" style="z-index: 999">
            <div class="zhanghaodenglu">Here to login</div>
            <div class="login">
                <form>
                    <div class="form-group ">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="text" class="form-control username" id="exampleInputEmail1" name="username"
                               placeholder="Email">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Password</label>
                        <input type="password" class="form-control password" id="exampleInputPassword1" name="password"
                               placeholder="Password">
                    </div>

                    <button type="button" id="login" class="btn btn-default btn-login"
                            style="background-color: #32cce4;">LOGIN
                    </button>
                    <button type="button" class="btn btn-toregist">还没有账号，->注册</button>
                    <div class="login-error">用户名或密码错误</div>

                </form>
            </div>
        </div>
    </c:if>
    <!--注册区域-->
    <div class="navr" id="navr">
        <div class="zhanghaodenglu">Here to Regist</div>
        <div class="login">
            <form style="margin-top: 10px">
                <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="text" class="form-control regist-username" name="username" placeholder="Email">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Nickname</label>
                    <input type="text" class="form-control regist-nickname" placeholder="Nickname">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control regist-password" placeholder="Password">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword2">RePassword</label>
                    <input type="password" class="form-control regist-passwordsec" id="exampleInputPassword2"
                           placeholder="RePassword">
                </div>
                <button type="button" class="btn btn-default btn-regist" style="background-color: #32cce4;">Regist
                </button>
                <button type="button" class="btn btn-default btn-back" style="background-color: #32cce4;">Back</button>

                <button type="button" class="btn regist-error">密码不一致，请重新输入</button>

            </form>
        </div>
    </div>

    <!--博客显示区域-->
    <div class="blog-area">
        <c:forEach items="${Articles}" var="article" varStatus="x">
            <div class="blog">
                <div class="showimg"><img src="../../../img/sjms.jpg"></div>
                <div class="content">
                    <div class="title"><a href="/cl/findArticle?aid=${article.aid}">${article.title}</a></div>
                    <div class="abstract"><a href="/cl/findArticle?aid=${article.aid}">
                        <div class="substring">${article.content}</div>
                    </a></div>
                    <div class="third">
                    <pre class="date">${article.date}    <a>${article.user.nickname}</a>  <div class="bdsharebuttonbox"><a
                            href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone"
                                                                             title="分享到QQ空间"></a><a href="#"
                                                                                                    class="bds_tsina"
                                                                                                    data-cmd="tsina"
                                                                                                    title="分享到新浪微博"></a><a
                            href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_renren"
                                                                                           data-cmd="renren"
                                                                                           title="分享到人人网"></a><a
                            href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div>
                    </pre>
                    </div>
                </div>
            </div>
        </c:forEach>
    </div>
</div>

<div class="footer">

</div>
</div>

</body>

<script src="../../../js/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/mustache.js/3.0.1/mustache.min.js"></script>
<!--<script src="../js/like.js"-->
<!--slider处理-->
<script src="../../../js/toolkit.js"></script>

<script>window._bd_share_config = {
    "common": {
        "bdSnsKey": {},
        "bdText": "",
        "bdMini": "2",
        "bdMiniList": false,
        "bdPic": "",
        "bdStyle": "2",
        "bdSize": "16"
    }, "share": {}
};
with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];</script>
</html>